<template>
  <div>
    <van-popup v-model="screenShow" @close="onClose" position="right" :style="{ height: '100%', width: '85%' }">
      <div class="screen-main">
        <div class="container-box">
          <div class="brand">
            <div class="brand-title">品牌</div>
            <div class="brand-list flex">
              <block v-for="(item, index) in getBrand" :key="item.id">
                <div class="brand-item-btn" :class="brandIndex === index ? 'on' : ''" v-if="index < brandNum" @click.stop="brandOn(index, item.id)">
                  {{ item.name }}
                  <img v-if="brandIndex === index" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png" />
                </div>
              </block>
              <div class="brand-item-btn brand-item-more flex-j-c flex-a-c" @click.stop="exhibitionOn" v-if="getBrand.length > brandNum">
                <span class="text">展开</span>
                <span class="iconfont icon-member-bottom"></span>
              </div>
            </div>
            <div class="brand-item-more flex-j-c" v-if="getBrand.length === brandNum" @click.stop="packup">
              <span class="text">收起</span>
              <span class="iconfont icon-member-bottom"></span>
            </div>
          </div>
          <div class="classify-popup flex">
            <div class="classify-title title-class">
              <h3>分类</h3>
            </div>
            <div class="classify-list flex">
              <block v-for="(item, index) in category" :key="index" class="calssify-mb">
                <div class="classify-item flex-a-c flex-j-c " :class="categoryIndex === index ? 'on' : ''" @click.stop="classifyOn(item.id, index)">
                  {{ item.name }}
                  <img v-if="categoryIndex === index" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png" />
                </div>
              </block>
            </div>
          </div>
          <div class="price-range">
            <div class="title-class price-title">蛋糕价格</div>
            <div class="brand-list flex">
              <block v-for="(item, index) in cakePriceArr" :key="index">
                <div class="brand-item-btn " :class="cakeIndex === index ? 'on' : ''" @click="cakeClick(index, item.type)">
                  {{ item.text }}
                  <img v-if="cakeIndex === index" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png" />
                </div>
              </block>
            </div>
          </div>
          <div class="price-range">
            <div class="title-class price-title">蛋糕尺寸</div>
            <div class="brand-list flex">
              <block v-for="(item, index) in cakeType" :key="index">
                <div class="brand-item-btn" :class="index == indexType ? 'on' : ''" @click="measureOn(item.type, index)">
                  {{ item.text }}
                  <img v-if="index === indexType" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png" />
                </div>
              </block>
            </div>
          </div>
          <div class="price-range">
            <div class="title-class price-title">零食价格</div>
            <div class="brand-list flex">
              <block v-for="(item, index) in priceSnacks" :key="index">
                <div class="brand-item-btn" :class="snacksIndex === index ? 'on' : ''" @click="snacksOn(index, item.type)">
                  {{ item.text }}
                  <img v-if="snacksIndex === index" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png" />
                </div>
              </block>
            </div>
          </div>
        </div>
        <div class="filtrate flex">
          <div class="filtrate-btn flex-j-c replacement" @click.stop="replacementOn">重置</div>
          <div class="filtrate-btn flex-j-c confirm" @click.stop="screenOn">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "screenPopup",
  props: {
    goodsItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    cakeType: {
      type: Array,
      default: () => {
        return [];
      }
    },
    getBrand: {
      type: Array,
      default: () => {
        return [];
      }
    },
    priceSnacks: {
      type: Array,
      default: () => {
        return [];
      }
    },
    category: {
      type: Array,
      default: () => {
        return [];
      }
    },
    cakePriceArr: {
      type: Array,
      default: () => {
        return [];
      }
    },
    screenShow: Boolean
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      brandNum: 5,
      indexType: -1,
      brandIndex: -1, //品牌索引
      snacksIndex: -1,
      categoryIndex: -1,
      cakeIndex: -1,
      //选择分类获取的ID系列
      brandValue: "",
      categoryValue: "",
      priceValue: ["", ""],
      cakeValue: "",
      cakePirceValue: ["", ""],
      iPnoneBottomBol: false
    };
  },
  mounted() {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    replacementOn() {
      //重置
      this.indexType = -1;
      this.brandIndex = -1;
      this.snacksIndex = -1;
      this.categoryIndex = -1;
      this.cakeIndex = -1;
      this.brandValue = "";
      this.categoryValue = "";
      this.priceValue = ["", ""];
      this.cakeValue = "";
      this.cakePirceValue = ["", ""];
      this.$emit("screenClick", {
        brandValue: "",
        categoryValue: "",
        priceValue: ["", ""],
        cakeValue: "",
        cakePirceValue: ["", ""],
        screenShow: this.screenShow
      });
    },
    onClose() {
      this.$emit("screenClose", this.screenShow);
    },
    exhibitionOn() {
      this.brandNum = this.getBrand.length;
    },
    packup() {
      //收起
      this.brandNum = 5;
    },
    measureOn(index, type) {
      //尺寸选择
      this.indexType = index;
      this.cakeValue = type;
    },
    classifyOn(id, index) {
      //分类选择
      this.categoryIndex = index;
      this.categoryValue = id;
    },
    brandOn(index, id) {
      //品牌选择
      this.brandIndex = index;
      this.brandValue = id;
    },
    snacksOn(index, type) {
      //零食价格选择
      this.snacksIndex = index;
      this.priceValue = type;
    },
    cakeClick(index, type) {
      //蛋糕价格选择
      this.cakeIndex = index;
      this.cakePirceValue = type;
    },
    screenOn() {
      //筛选完成
      this.$emit("screenClick", {
        brandValue: this.brandValue,
        categoryValue: this.categoryValue,
        priceValue: this.priceValue,
        cakeValue: this.cakeValue,
        cakePirceValue: this.cakePirceValue,
        screenShow: this.screenShow
      });
    },
    goodsNavTo(id) {
      this.$router.push(this.fun.getUrl("sachertorteGoods", {}, { id: id }));
    }
  }
};
</script>
<style scoped>
#appMain.pcStyle .van-popup {
  width: 375px !important;
}

.classify-list .calssify-mb:nth-child(3) .classify-item {
  margin: 0 0 0.5rem 0;
}
</style>
<style scoped lang="scss">
.container-box {
  padding: 0 0 0 0.75rem;

  .brand {
    padding: 0.75rem 0;

    .brand-title {
      text-align: left;
      font-size: 1rem;
      font-weight: bold;
      line-height: 1.4375rem;
      color: #333;
      padding: 0 0 0.75rem 0;
    }
  }
}

.brand-list {
  flex-wrap: wrap;
  padding: 0 0.5rem 0 0;
}

.brand-item-btn {
  min-width: 5.6875rem;
  text-align: center;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  background: #f6f6f6;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.03125rem;
  color: #666;
  margin: 0 0.5rem 0.75rem 0;

  &:nth-child(3) {
    margin-right: 0;
  }
}

.brand-item-more {
  background-color: transparent;
  font-size: 0.625rem;
  line-height: 0.875rem;
  color: #999;

  .text {
    padding: 0 0.125rem 0 0;
  }
}

.screen-main {
  .on {
    box-sizing: border-box;
    color: #e95352;
    background: rgba(233, 83, 82, 0.04);
    border: 0.0625rem solid #e95352;
    position: relative;
  }
}

.brand-item-btn img,
.classify-item img {
  width: 1.0625rem;
  height: 0.875rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.classify-popup {
  flex-direction: column;
  padding: 0.25rem 0.9375rem 0 0;

  .classify-title {
    text-align: left;
    padding: 0 0 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
  }
}

.title-class {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.375rem;
  color: #333;
}

.classify-list {
  padding: 0.75rem 0 0 0;
  flex-wrap: wrap;
}

.classify-item {
  min-width: 5.6875rem;
  box-sizing: border-box;
  text-align: center;
  border: 0.0625rem solid #ccc;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  margin: 0 0.5rem 0.5rem 0;

  :nth-child(3) {
    margin: 0 0 0.5rem 0;
  }
}

/* 价格区间样式 */
.price-range {
  padding: 1.5rem 0 0 0;

  .price-title {
    padding: 0 0 0.75rem 0;
    text-align: left;
  }
}

.filtrate {
  padding: 0.75rem 0 0 0;

  .filtrate-btn {
    width: 50%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 0;
  }
}

.replacement {
  background-color: #f6f6f6;
  color: #999;
}

.confirm {
  background-color: #e95352;
  color: #fff;
}
</style>
